<template>
  <div class="guide">
    <h1 class="app__title" ref="title" id="title">使用vue-cli快速创建vue项目</h1>
    <button class="btn__start" ref="btn" @click="toPowerPoint">开始</button>
  </div>
</template>

<script>
export default {
  mounted() {
    const _this = this
    this.splitText = new window.SplitText("#title", {type:"chars"})
    const chars = this.splitText.chars
    window.TweenMax.staggerFrom(
      chars, 
      0.8, 
      {delay: 0.5, opacity:0, scale:0, y:0, rotationX:180, transformOrigin:"0% 50% -50", ease:window.Back.easeOut}, 
      0.08,
      () => {
        _this.$refs['btn'].classList.add('active')
        _this.active = true
      }
    )
  },
  methods: {
    toPowerPoint() {
      if (this.active) {
        this.$router.replace({name: 'powerpoint'})
      }
      
    }
  }
}
</script>

<style scoped>
.guide {
  width: 1200px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.btn__start {
  border: 2px solid #f9d3c8;
  color: orange;
  background: transparent;
  position: relative;
  left: 50%;
  top: 100px;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 60px;
  font-size: 24px;
  opacity: 0;
  outline: none;
  transition: all ease-out 0.3s;

}
.btn__start.active {
  opacity: 1;
  cursor: pointer;
}
</style>